<template>
	<view class="container">
		<u-navbar :autoBack="true" :title-bold='true' title='个人资料' :border-bottom='false' :is-fixed='true'> </u-navbar>

		<view class="card" style="margin-top: 10px;">
			<view class="left">头像</view>
			<view @click="chooseAvatar" class="">
				<image :src="userinfo.avatar" mode="widthFix"></image>
			</view>
		</view>
		<view class="card">
			<view class="left">名字</view>
			<view class="right">
				<input class="input" v-model="userinfo.username" type="text" placeholder="请输入姓名">
			</view>
		</view>
		<view class="card">
			<view class="left">性别</view>
			<view class="right" @click="show=true">
				<view class="sex" v-if="userinfo.gender==1">男</view>
				<view class="sex" v-else-if="userinfo.gender==2">女</view>
				<view class="placeholder sex" v-else>请选择</view>
			</view>
			<u-icon name="arrow-right" size="24"></u-icon>
		</view>
		<view class="card">
			<view class="left">手机号码</view>
			<view class="right">
				<input class="input" v-model="userinfo.mobile" type="text" placeholder="请输入号码">
			</view>
		</view>
		<view class="card">
			<view class="left">邮箱</view>
			<view class="right">
				<input class="input" v-model="userinfo.email" type="text" placeholder="请输入邮箱">
			</view>
		</view>
		<view class="card" style="margin-top: 10px;">
			<view class="left">市、县</view>
			<view class="right" @click="picker=true">
				<view class="address" v-if="userinfo.area">{{userinfo.area}}</view>
				<view class="placeholder sex" v-else>请选择</view>
			</view>
			<u-icon name="arrow-right" size="24"></u-icon>
		</view>
		<view class="card">
			<view class="left">职业/专业</view>
			<view class="right">
				<input class="input" v-model="userinfo.speciality" type="text" placeholder="请填写专业">
			</view>
		</view>

		<view class="card">
			<view class="left">个人简介</view>
			<view class="right">
				<textarea v-model="userinfo.bio" :style="input?'text-align: start;':''" @blur="input=false"
					@focus="input=true" placeholder="请输入个人简介" class="input" :auto-height="true"></textarea>
			</view>
		</view>
		<!-- 	<view class="card" v-if="userinfo.job==2">
			<view class="left">公告</view>
			<view class="right">
				<textarea v-model="userinfo.notice" :style="input?'text-align: start;':''" 
					@blur="input=false" @focus="input=true" 
					placeholder="请输入护航员公告" class="input" :auto-height="true"></textarea>
			</view>
		</view> -->
		<view class="card" style="margin-top: 10px;" @click="goTo('/sub/center/uploadInfoImg?id='+userId)">
			<view class="left">个人图片</view>
			<u-icon name="arrow-right" size="24"></u-icon>
		</view>
		<view class="card" @click="goTo('/sub/center/realname')">
			<view class="left">结算证件</view>
			<u-icon name="arrow-right" size="24"></u-icon>
		</view>

		<view @click="save" class="btn">保存</view>

		<u-select v-model="show" :list="list" @confirm="confirm()"></u-select>
		<u-toast ref="uToast" />
		<!-- 地区选择器 -->
		<u-picker v-model="picker" mode="region" @confirm='region()'></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		editUserInfo,
		getUserInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				userinfo: {},
				uploadFormData: new Object(),
				list: [],
				show: false,
				picker: false,
				input: false,
				userId: '',
			}
		},
		onLoad(e) {
			this.userId = this.ws.getUserInfo().user_id
			if (e.id) this.userId = e.id
		},
		onShow() {
			this.init()
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				let that = this
				// 可以在此上传到服务端
				that.upload(path, function(res, file) {
					that.userinfo.avatar = res.data.fullurl
					that.save()
				});
			})
		},
		methods: {
			init() {
				let that = this,
					obj = {
						1: "男",
						2: "女"
					}
				that.list = Object.keys(obj).map(key => ({
					value: key,
					label: obj[key]
				}));
				getUserInfo({
					'user_id': that.userId
				}).then(res => {

					if (res.code == 1) {
						that.userinfo = res.data.info
						let src = ''
						that.userinfo.images.forEach(item => {
							if (!src) {
								src = item
							} else {
								src = src + ',' + item
							}
						})
						that.userinfo.images = src
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			save() {
				let that = this
				editUserInfo(that.userinfo).then(res => {

					that.$refs.uToast.show({
						title: res.msg,
						type: 'success'
					})
				})
			},
			confirm(e) {
				console.log(e);
				this.userinfo.gender = e[0].value
				// editUserInfo(this.userinfo)
			},
			region(e) {
				console.log(e);
				this.userinfo.area = e.province.label + '-' + e.city.label + '-' + e.area.label
				// editUserInfo(this.userinfo)
			},
			clickMoreTool: function(name) {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: function(res) {
						that.upload(res.tempFiles[0].path, function(res, file) {
							that.userinfo.avatar = res.data.fullurl
						});
					},
					fail: () => {}
				});

			},
			// 剪裁
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			upload: function(path, callBack) {
				var that = this
				uni.showLoading({
					title: '正在上传...'
				})


				const uploadTask = uni.uploadFile({
					url: this.ws.upload,
					// #ifdef APP-PLUS || H5
					file: path,
					// #endif
					filePath: path,
					name: 'file',
					formData: that.uploadFormData,
					success: (uploadFileRes) => {
						uni.hideLoading()
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 1) {
							callBack(res, path)
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false
							})
						}
					},
					fail: res => {
						uni.hideLoading()
						uni.showModal({
							title: '温馨提示',
							content: '上传失败,请重试~',
							showCancel: false
						})
					},
					complete: res => {
						uni.hideLoading()
					}
				});

				// #ifndef APP-PLUS
				uploadTask.onProgressUpdate((res) => {
					uni.showLoading({
						title: res.progress + '%'
					})
				});
				// #endif
			},

		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background-color: #EEE;

		.card {
			background-color: #FFF;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 15px;
			border-bottom: 1px solid rgba(240, 240, 240, 0.4);

			image {
				height: 50px;
				width: 50px;
				border-radius: 50%;
				margin-right: 10px;
			}

			.left {
				min-width: 80px;
			}

			.right {
				display: inherit;
				width: 100%;

				.input {
					font-size: 14px;
					width: 100%;
					text-align: start;
				}

				.placeholder {
					opacity: 0.8;
					font-size: 14px;
					justify-content: flex-end;
					display: flex;
				}
			}

		}

	}
</style>